<template>
  <div class="w-full relative overflow-hidden skeleton-effect ">
    <ul class="flex-col min-h-screen mb-1.5">
      <li key="0" class="flex justify-center items-center">
        <img class="w-30" src="./assets/images/nan.svg" />
      </li>
      <li key="1" class="flex justify-center items-center">
        <img class="w-30" src="./assets/images/wu.svg" />
      </li>
      <li key="2" class="flex justify-center items-center">
        <img class="w-30" src="./assets/images/a.svg" />
      </li>
      <li key="3" class="flex justify-center items-center">
        <img class="w-30" src="./assets/images/mi.svg" />
      </li>
      <li key="4" class="flex justify-center items-center">
        <img class="w-30" src="./assets/images/tuo.svg" />
      </li>
      <!-- 佛 -->
      <li key="5" class="flex justify-center items-center">
        <img class="w-30 ft" :src="currentImage" />
      </li>
    </ul>
    <!-- 动画 -->
    <div class="flex justify-center items-center">
      <div class="bottom-10">
        <svg width="300" height="50" viewBox="0 0 300 50">
          <!-- 定义直线路径 -->
          <path
            id="myPath"
            d="M10,25 L290,25"
            fill="none"
            stroke="#C2301C"
            stroke-width="2"
          />
          <text font-size="16">
            <textPath href="#myPath" startOffset="50%">
              🥳
              <animate
                attributeName="startOffset"
                from="0%"
                to="100%"
                dur="3s"
                repeatCount="indefinite"
              />
            </textPath>
          </text>
        </svg>
      </div>
    </div>
  </div>
</template>

<script setup lang="">
import { animate } from "animejs";
// 使用 import 导入图片
import milePng from "./assets/images/mile.png";
import foSvg from "./assets/images/fo.svg";
const images = [milePng, foSvg];
const currentImage = ref(images[1]);
const isFading = ref(false);
onMounted(() => {
  loopAnimation();
  function loopAnimation() {
    animate(".ft", {
      opacity: [1, 0.1],
      rotate: 360,
      loop: true,
      alternate: true,
      ease: "inOutExpo",
      scale: 0.2,
      filter: "blur(5px)",
      onLoop: () => {
        // 开始淡出
        isFading.value = !isFading.value;
        if (isFading.value) {
          currentImage.value =
            currentImage.value === images[0] ? images[1] : images[0];
        }
      },
    });
  }
});
</script>
<style scoped>
.skeleton-bg {
  overflow: hidden;
}

.skeleton-effect {
  background-image: linear-gradient(
    105deg,
    #0000 0% 40%,
    rgba(255, 255, 255, 0.4) 50%,
    #0000 60% 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
</style>
